<template>
  <Layout>
    <div class="product-second">
      <ProductBanner :bannerImg="bannerImg" :title="title"/>
      <div class="content">
        <div class="rightDisplay">
<!--          <a-carousel>-->
<!--&lt;!&ndash;            <div&ndash;&gt;-->
<!--&lt;!&ndash;              slot="prevArrow"&ndash;&gt;-->
<!--&lt;!&ndash;              slot-scope="props"&ndash;&gt;-->
<!--&lt;!&ndash;              class="custom-slick-arrow"&ndash;&gt;-->
<!--&lt;!&ndash;              style="left: 10px;zIndex: 1"&ndash;&gt;-->
<!--&lt;!&ndash;            >&ndash;&gt;-->
<!--&lt;!&ndash;              <a-icon type="left-circle" />&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">&ndash;&gt;-->
<!--&lt;!&ndash;              <a-icon type="right-circle" />&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--            <div><h3>1</h3></div>-->
<!--            <div><h3>2</h3></div>-->
<!--            <div><h3>3</h3></div>-->
<!--            <div><h3>4</h3></div>-->
<!--          </a-carousel>-->
          <ProductType />
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from '/@/components/layout/Layout.vue'
import ProductBanner from '/@/components/ProductBanner.vue'
import ProductType from '/@/components/product/ProductType.vue'
import secondImg from "../assets/images/product/5. productsecond.jpg"
import logoImg from "../assets/logo-error-small.png"
export default {
  name: "ProductSecond",
  components:{Layout,ProductBanner,ProductType},
  setup(){
    const bannerImg = secondImg
    const title = "Routers"
    const getError = (e) => {
      e.target.src = logoImg
    }
    return{
      bannerImg,
      title,
      getError
    }
  }
}
</script>

<style scoped lang="scss">
.product-second{
  .content{
    margin:0 auto;
    width:70vw;
  }
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
